<template>
  <div class="infoList">
    <div>
      <div class="item">
        <span>中文名</span>
        <span>{{ props.merchantInfo.chineseName }}</span>
      </div>
      <div class="item">
        <span>印尼名</span>
        <span>{{ props.merchantInfo.indonesiaName }}</span>
      </div>
      <div class="item">
        <span>入驻时间</span>
        <span>{{ props.merchantInfo.settledTime }}</span>
      </div>
      <van-divider style="margin: 12px 0;" />
      <div class="item">
        <span>中文地址</span>
        <span>{{ props.merchantInfo.chineseAddress }}</span>
      </div>
      <div class="item">
        <span>印尼语地址</span>
        <span
          @click="handleAction"
          style="color: #0870CB; text-decoration: underline;">
          {{ props.merchantInfo.indonesiaAddress }}
        </span>
      </div>
      <van-divider style="margin: 12px 0;" />
      <div class="item">
        <span>联系人</span>
        <span>{{ props.merchantInfo.contacts }}</span>
      </div>
    </div>
    <div class="operate">
      <div style="margin-left: 60px" @click="handleLike(0)">
        <img :src="likeLogo" alt="">
        <span>{{ props.merchantInfo.good || 459 }}</span>
      </div>
      <van-divider vertical />
      <div style="margin-right: 60px" @click="handleLike(1)">
        <img :src="hateLogo" alt="">
        <span>{{ props.merchantInfo.bad || 48 }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { merchantLike } from "@/api/homePage.js";
import likeLogo from "@/assets/image/like.png";
import hateLogo from "@/assets/image/hate.png";

const props = defineProps({
  merchantId: String,
  merchantInfo: Object,
});

const handleLike = (type) => {
  // type: 0 - like, 1 - hate
  merchantLike({
    merchantId: props.merchantId,
    type: type,
  }).then((res) => {
    if (type === 0) {
      props.merchantInfo.good = (props.merchantInfo.good || 459) + 1;
    } else {
      props.merchantInfo.bad = (props.merchantInfo.bad || 48) + 1;
    }
  });
};

const handleAction = () => {
  window.open(props.merchantInfo.addressGoogle, "_blank");
}

</script>
<style lang="less" scoped>
div.infoList {
  >div {
    border-radius: 20px;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    &:not(:last-child) {
      margin-bottom: 12px;
    }
    div.item {
      display: flex;
      justify-content: start;
      &:not(:last-child) {
        margin-bottom: 12px;
      }
      span:first-child {
        flex-basis: 70px;
        margin-right: 12px;
        text-align: right;
        color: #9C9C9C;
        font-size: 14px;
      }
      span:last-child {
        color: #020000;
        font-size: 14px;
        flex: 1;
      }
    }
    &.operate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      div {
        display: flex;
        align-items: center;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
